<template>
  <div>

    <div class="nav">
      <h2 @click="go()" class="go">宠物商城</h2>
    </div>

    <el-image :src="imgUrl"></el-image>

    <div class="main">
      <div class="left">
        <!--<el-image :src="imgUrl2" class="imgUrl2"></el-image>-->
        <span>销量折线图</span>
        <div id="div1" style="width: 600px;height:400px;margin-top:20px;"></div>
      </div>
      <div class="right">
        <p>{{details}}</p>
        <div class="price">
          <p style="margin:10px;">价格:￥{{price}}.00</p>
          <p>郑重承诺:纯种健康</p>
        </div>
        <div class="info">
          <div class="info2"><p>年龄</p>
            <p>{{age}}个月</p></div>
          <div class="info2"><p>性别</p>
            <p>{{sex}}</p></div>
          <div class="info2"><p>身高/cm</p>
            <p>{{height}}</p></div>
          <div class="info2"><p>体重/kg</p>
            <p>{{weight}}</p></div>
          <div class="info2">
            <p>发货地</p>
            <p>{{address}}</p>
          </div>
        </div>
        <div class="sale">
          <p>本月售出:{{sale_count}}只</p>
          <p>优惠码:{{coupon}}</p>
        </div>
        <el-button type="success" @click="cancel()">返回</el-button>
        <el-badge :value="carsCount" class="item" type="primary">
          <el-button type="danger" icon="el-icon-shopping-cart-full" @click="addCars()">添加</el-button>
        </el-badge>
        <router-link to="/cars" style="margin-left:30px;">我的购物车</router-link>
      </div>
    </div>
    <div class="style2">
      <p>全国百家连锁店，专业饲养环境，疫苗隔离服务。</p>
      <p>进口三联疫苗，体内外驱虫。</p>
      <p>一对一的服务。24小时解决问题。</p>
      <p>品质保终身。</p>
      <p>我们的宗旨：品相好，血统纯。</p>
      <p>我们的优势，技术熟练。</p>
      <p>我们的追求：让您满意。</p>
      <p>我们的承诺，诚信服务，诚信商家。</p>
    </div>

    <scroll-top/>
  </div>
</template>

<script>
  import cookie from 'js-cookie'
  import Poster from '../assets/poster2.jpg'
  import pet4 from '../assets/pet/pet4.jpg'
  import Carousel from "../components/Carousel";
  import ScrollTop from "../components/ScrollTop";
  import * as echarts from 'echarts';

  const axios = require('axios')
  export default {
    name: "details",
    components: {ScrollTop, Carousel},
    data() {
      return {
        ruleForm: null,
        imgUrl: Poster,
        imgUrl2: pet4,
        sort: '',
        address: '',
        sex: '',
        weight: '',
        height: '',
        coupon: '',
        sale_count: '',
        age: '',
        price: '',
        details: '',
        carsCount: 0
      }
    },
    mounted() {
      this.getCarsCount()

      let myChart = echarts.init(document.getElementById('div1'));

      let option = {
        xAxis: {
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
        },
        yAxis: {},
        series: [
          {
            data: [367, 385, 410, 310, 323, 351, 325, 380, 391, 355, 361, 408],
            type: 'line',
            stack: 'x',
            smooth: true
          }
        ]
      };

      myChart.setOption(option);
    },
    methods: {
      go() {
        this.$router.push('/home')
      },
      cancel() {
        this.$router.go(-1)
      },
      addCars() {  // 添加到购物车里
        const loginName = cookie.get('loginName')
        const _this = this;
        console.log('cat_id:' + _this.$route.query.id + '  登录名:' + loginName)
        axios.post('http://localhost:9000/cars/add/' + _this.$route.query.id + '/' + loginName).then(function (resp) {
          if (resp.data == 'success') {
            console.log('成功添加到购物车11')
            _this.$message({
              type: 'success',
              message: '成功添加'
            })
            _this.$router.push('/cars')
          } else {
            return false;
          }
        });
      },
      getCarsCount() { // 获取当前用户的购物车数量
        const _this = this;
        axios.get('http://localhost:9000/cars/getCarsCount2/' + cookie.get('loginName')).then(function (resp) {
          _this.carsCount = resp.data
        })
      }
    },
    created() {
      const _this = this
      console.log('猫咪的id：' + _this.$route.query.id)
      this.$axios.get('http://localhost:9000/cat/findById/' + _this.$route.query.id).then(function (resp) {
        _this.sort = resp.data.cat_sort;
        _this.address = resp.data.memo;
        _this.age = resp.data.age;
        _this.sex = resp.data.sex;
        _this.weight = resp.data.weight;
        _this.height = resp.data.height;
        _this.coupon = resp.data.is_coupon;
        _this.sale_count = resp.data.sale_count;
        _this.price = resp.data.price;
        _this.details = resp.data.details;
      })
    }
  }
</script>

<style scoped>

  html {
    margin: 0;
    padding: 0;
  }

  .el-input {
    border: 0;
  }

  .nav {
    weight: 100%;
    height: 88px;
  }

  .go {
    cursor: pointer;
  }

  .main {
    width: 100%;
    height: 500px;
    margin-top: 20px;
    font-size: 19px;
  }

  .left {
    width: 50%;
    height: 500px;
    display: inline-block;
    float: left;
  }

  .right {
    width: 50%;
    height: 500px;
    display: inline-block;
  }

  .price {
    width: 100%;
    height: 80px;
    background: gainsboro;
    text-align: center;
    vertical-align: middle;
    margin-top: 30px;
  }

  .info {
    width: 80%;
    height: 80px;
    margin-left: 25px;
  }

  .info2 {
    width: 19%;
    height: 80px;
    display: inline-block;
  }

  .sale {
    margin-left: 20px;
    margin-top: 50px;
  }

  .imgUrl2 {
    width: 240px;
    height: 240px;
  }

  .style1 {
    width: 100%;
    height: 80px;
    margin-top: 30px;
  }

  .style2 {
    width: 100%;
    height: 600px;
  }

</style>
